<template>
  <div class="home">
    <!-- 背景图 -->
    <div class="top" ref="distanceTop">
      <div class="top_content">
        <div class="title" v-if="showTopFlag">
          <whiteTop />
          <!-- <title1 :msg="logoPng"></title1> -->
        </div>

        <div
          v-if="!showTopFlag"
          style="position:fixed;top:0;width:100%;background:#fff;z-index:999"
        >
          <topCloumn />
        </div>
        <!-- //占位 -->
        <div v-if="!showTopFlag" style="width:100%;height:152px"></div>
        <div class="situation flexCenter">
          <div class="lankuang">
            <div class="text">项目接入情况</div>
            <div class="content flexAround">
              <div>
                <div class="content_top flexAround">
                  <div>{{this.topInfo.projectTotal}}</div>
                  <div>个</div>
                </div>
                <div class="content_bottom">接入项目</div>
              </div>
              <div>
                <div class="content_top flexAround">
                  <div>{{this.topInfo.orgTotal}}</div>
                  <div>个</div>
                </div>
                <div class="content_bottom">接入施工单位</div>
              </div>
            </div>
          </div>
          <div class="lankuang">
            <div class="text">项目人员情况</div>
            <div class="content flexAround">
              <div>
                <div class="content_top flexAround">
                  <!-- <div>{{this.topInfo.managementTotal}}</div> -->
                  <div>{{this.topInfo.managementTotal}}</div>
                  <div>人</div>
                </div>
                <div class="content_bottom">在场管理人员</div>
              </div>
              <div>
                <div class="content_top flexAround">
                  <div>{{this.topInfo.laborTotal}}</div>
                  <div>人</div>
                </div>
                <div class="content_bottom">在场劳务人员</div>
              </div>
            </div>
          </div>
          <div class="lankuang">
            <div class="text">工资支付情况</div>
            <div class="content flexAround">
              <div>
                <div class="content_top flexAround">
                  <div style="width:100px">{{(this.topInfo.wagePayTotal/10000).toFixed(2)}}</div>
                  <div>万元</div>
                </div>
                <div class="content_bottom">累计支付</div>
              </div>
              <div>
                <div class="content_top flexAround">
                  <div style="margin-right:0">0</div>
                  <div>次</div>
                </div>
                <div class="content_bottom">拖欠工资</div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel">
          <div style="width:1200px;margin:0 auto;position:relative">
            <div class="moreList" @click="moreList">更多&nbsp;></div>
            <a-carousel dot-position="right" autoplay :dots="false" style="width:1200px;">
              <div class="carDiv">
                <span class="imgSpan">
                  <!-- <img style="margin-left:0px" src="@/assets/homeImg/tongzhi.png" alt="" /> -->
                </span>
                <span class="text" @click="NoticeDetail">《保障农民工工资支付条例》5月1日正式实施</span>
                <span>2021年2月12日&nbsp;星期五</span>
              </div>
              <!-- <div class="carDiv">
                <span class="imgSpan">

                </span>
                <span class="text" @click="NoticeDetail">春节假期后第一天，李克强开会部署这件事</span>
                <span>2021年2月28日&nbsp;星期日</span>
              </div>-->
            </a-carousel>
          </div>
        </div>
      </div>
    </div>

    <div class="dataAnalysis">
      <!-- <div class="analysisTitle">数据分析</div> -->
      <div class="flexCenter" style="margin-bottom:85px">
        <div class="selectDiv flexStart">
          <div
            class="selectCell"
            :class="{activeCell:this.selectValue==0}"
            @click="selectValue=0"
          >项目概览</div>
          <div
            class="selectCell"
            :class="{activeCell:this.selectValue==1}"
            @click="selectValue=1"
          >人员实名制</div>
          <div
            class="selectCell"
            :class="{activeCell:this.selectValue==2}"
            @click="selectValue=2"
          >劳务工资</div>
          <div
            class="selectCell"
            :class="{activeCell:this.selectValue==3}"
            @click="selectValue=3"
            style="margin-right: 0;"
          >投诉维权</div>
        </div>
      </div>
      <div v-if="selectValue==0">
        <div class="centerProject flexStart">
          <div class="projectLeft">
            <a-menu
              style="width: 307px"
              :default-selected-keys="defaultSelectedkeys"
              :default-open-keys="['sub1']"
              mode="inline"
              theme="light"
            >
              <a-menu-item
                v-for="(item) in projectData"
                :key="item.id"
                @click="onClickMenu(item)"
              >{{item.briefName}}</a-menu-item>
            </a-menu>
          </div>
          <div class="projectRight">
            <div class="projectRight-title">{{projectTopInfo.name}}</div>

            <div class="projectRight-content flexStart2">
              <div>
                <span>实际开工时间：{{projectTopInfo.kgTime}}</span>
                <span></span>
              </div>
              <div>
                <span>实际竣工时间：{{projectTopInfo.jgTime}}</span>
                <span></span>
              </div>
              <div>
                <span>路线总长（km）：{{projectTopInfo.lxLength}}</span>
                <span></span>
              </div>
              <div>
                <span>建设周期（年）：{{projectTopInfo.jsZq}}</span>
                <span></span>
              </div>
              <div>
                <span>批复概算（亿元）：{{projectTopInfo.pfGs}}</span>
                <span></span>
              </div>
            </div>

            <div class="enterDataAnalysis" @click="dataCenter">进入劳务数据中心</div>

            <div class="projectRight-bottom flexStart">
              <div class="projectRight-bottom-cell">
                <div class="projectRight-bottom-title">施工单位（已接入）</div>
                <div>
                  <span style="font-size:46px">{{this.projectDetail.orgTotal}}</span>
                  <span style="font-size:14px">个</span>
                </div>
              </div>
              <div class="projectRight-bottom-cell">
                <div class="projectRight-bottom-title">劳务人员（在场）</div>
                <div>
                  <span style="font-size:46px">{{this.projectDetail.laborTotal}}</span>
                  <span style="font-size:14px">人</span>
                </div>
              </div>
              <div class="projectRight-bottom-cell" style="border:none;width:26%">
                <div class="projectRight-bottom-title">维权事件</div>
                <div>
                  <span style="font-size:46px">0</span>
                  <span style="font-size:14px">个</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="selectValue==1">
        <div class="mapEcharts flexCenter">
          <div style="position:relative;width:1200px;margin:0 auto">
            <div class="echartsTitle">籍贯分布情况</div>
            <div style="width:782px;height:607px;margin:0 auto">
              <Echart :echartObj="echartObj" />
            </div>
            <div class="ranking" style="position:absolute;left:0%;bottom:10%">
              <div style="margin-bottom:23px">
                <span style="margin-right:26px">
                  <img src="@/assets/img/rank1.png" alt />
                </span>
                <span style="margin-right:37px">{{this.rankData[0].name}}</span>
                <span>{{this.rankData[0].value}}人</span>
              </div>
              <div style="margin-bottom:23px">
                <span style="margin-right:26px">
                  <img src="@/assets/img/rank2.png" alt />
                </span>
                <span style="margin-right:37px">{{this.rankData[1].name}}</span>
                <span>{{this.rankData[1].value}}人</span>
              </div>
              <div>
                <span style="margin-right:26px">
                  <img src="@/assets/img/rank3.png" alt />
                </span>
                <span style="margin-right:37px">{{this.rankData[2].name}}</span>
                <span>{{this.rankData[2].value}}人</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flexCenter" style="background:#fff">
          <div style="width:1200px;margin:0 auto">
            <div class="echartsTitle" style="margin-bottom:20px">年龄分布情况</div>
            <div style="height:707px;margin:0 auto">
              <Echart :echartObj="echartObj2" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="selectValue==2">
        <LaborWage :projectData="projectData"></LaborWage>
      </div>
      <div v-if="selectValue==3">
        <Protection></Protection>
      </div>
    </div>
  </div>
</template>

<script>
// import Map from './map/index'
// import Bottom from './bottom/index'
import LaborWage from './laborWage/index'
import Protection from './protection/index'
import title1 from '@/views/title/index1.vue'
import logoPng from '@/assets/homeImg/logoLan.png'
import { getWageStatistics, queryAll, queryProjectDetail } from '@/api/gateway'
import Echart from '@/components/echarts/index.vue'
import '../../../node_modules/echarts/map/js/china.js'
import moment from 'moment'
import china from 'echarts/map/json/china.json'
import topCloumn from './topCloumn/index'
import whiteTop from './topCloumn/whiteTop.vue'
import { getHomePage } from '@/api/dataCenterHome'
export default {
  name: 'Home',
  components: {
    // Map,
    // Bottom,
    title1,
    Echart,
    LaborWage,
    Protection,
    topCloumn,
    whiteTop
  },

  data() {
    return {
      logoPng: logoPng,
      topInfo: {
        wagePayTotal: 0
      },
      projectData: [],
      //项目信息
      projectDetail: [],
      //项目写死的信息
      projectTopInfo: {
        name: '京沪高速公路新沂至江都段扩建工程',
        kgTime: '2020-04',
        jgTime: '2023-10',
        lxLength: '259.5',
        jsZq: '3.5',
        pfGs: '312.6'
      },
      defaultSelectedkeys: [],
      projectId: '',
      selectValue: 0,
      rankData: [
        { name: 1, value: 1 },
        { name: 1, value: 1 },
        { name: 1, value: 1 }
      ],
      echartObj: {},
      echartObj2: {},
      title: {
        show: false
      },
      mapData: [],
      scollData: 0,
      showTopFlag: true
    }
  },
  mounted() {
    window.scrollTo(0, 0)

    window.scrollTo(0, 0)
    // this.test = this.debounce(this.handleScroll, 20)
    window.addEventListener('scroll', this.scrollHandol)
    this.getStatistics()
    this.getProjectList()
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollHandol)
  },
  methods: {
    //滚动条
    scrollHandol() {
      // console.log(document.documentElement.scrollTop);
      this.scollData = this.$refs.distanceTop.getBoundingClientRect().top
      // this.scollData=document.documentElement.scrollTop
      // console.log(this.scollData);
      if (this.scollData > -70) {
        this.showTopFlag = true
      } else {
        this.showTopFlag = false
      }
    },
    moment,
    moreList() {
      this.$router.push({ path: '/list' })
    },
    NoticeDetail() {
      const { href } = this.$router.resolve({
        path: '/detail'
      })

      window.open(href, 'href')
    },
    //点击左侧菜单时
    onClickMenu(val) {
      let briefName = val.briefName
      switch (briefName) {
        case '京沪扩建':
          this.projectTopInfo = {
            name: '京沪高速公路新沂至江都段扩建工程',
            kgTime: '2020-04',
            jgTime: '2023-10',
            lxLength: '259.5',
            jsZq: '3.5',
            pfGs: '312.6'
          }
          break
        case '平广扩建':
          this.projectTopInfo = {
            name: '沪陕高速公路平潮至广陵段扩建工程项目',
            kgTime: '2020-12',
            jgTime: '2026-01',
            lxLength: '210',
            jsZq: '3',
            pfGs: '154.1'
          }
          break
       
      }
      this.projectId = val.id

      this.$store.commit('setProjectId', this.projectId)
      this.$store.commit('setBriefName', val.briefName)
      this.getProjectDetail()
    },
    //获取统计数据
    getStatistics() {
      getWageStatistics({}).then((res) => {
        let data = res.data.data
        // console.log(data);
        this.topInfo = data
        // console.log(this.topInfo.wagePayTotal);

        if (this.topInfo.wagePayTotal) {
          this.topInfo.wagePayTotal = this.topInfo.wagePayTotal
        } else {
          this.topInfo.wagePayTotal = 0
        }
        this.rankData = this.topInfo.provinceRanking
        // 地图数据
        this.echartObj = {
          color: ['#0070BC'],
          backgroundColor: '#F3F6FB',
          visualMap: {
            min: 0,
            max: this.topInfo.provinceRanking[0].value,
            text: ['密度高', '密度低'],
            realtime: false,
            show: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} 人'
          },

          geo: {
            // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: false,
            zoom: 1,
            label: {
              normal: {
                show: true, // 是否显示对应地名

                textStyle: {
                  // color: '#ccc'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#fff'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                // shadowBlur: 20,
                borderWidth: 0
                // shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },

          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '籍贯分布情况', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: this.topInfo.provinceStatistics
            }
          ]
        }
        //漏斗图数据
        this.echartObj2 = {
          color: ['#5470C6', '#FAC858', '#FE6F6F', '#91CC75'],
          legend: {
            data: ['20及以下', '20-40', '40-60', '60以上']
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          grid: {
            left: 0,
            top: 5,

            right: 0
            // containLabel: true
          },
          series: [
            {
              name: '年龄',
              type: 'pie',
              radius: '50%',
              center: ['50%', '50%'],
              label: {
                formatter: '{b}\n({d}%)',
                color: '#000',
                align: 'right',
                lineHeight: 20,
                fontSize: 14
              },
              labelLine: {
                length2: 25
              },
              data: this.topInfo.ageStatistics,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      })
    },
    //获取项目列表
    getProjectList() {
      queryAll({}).then((res) => {
        this.defaultSelectedkeys.push(res.data.data[0].id)
        this.projectId = res.data.data[0].id
        this.$store.commit('setProjectId', this.projectId)
        this.$store.commit('setBriefName', res.data.data[0].briefName)
        this.getProjectDetail()
        this.projectData = res.data.data
      })
    },
    //获取项目信息
    getProjectDetail() {
      let data = {
        projectId: this.projectId
      }
      queryProjectDetail(data).then((res) => {
        this.projectDetail = res.data.data
      })
    },
    //进入数据中心
    dataCenter() {
      this.$store.commit('setProjectId', this.projectId)
      sessionStorage.setItem('projectId', this.projectId)

      sessionStorage.setItem('imgdata', JSON.stringify({ fullName: this.$store.state.userInfo.briefName }))
      // this.$store.commit('setDataCenterHome', {})
      // getHomePage({ projectId: this.projectId }).then((res) => {
        // this.$store.commit('setDataCenterHome', res.data.data)
        const { href } = this.$router.resolve({
          path: `/projectDetails`
        })
        window.open(href, '_blank')
      // })
    }
  }
}
</script>
<style scoped>
.home {
  color: white;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  /* padding-bottom: 100px; */
}
.top {
  width: 100%;
  height: 480px;
  /* opacity: 0.48; */
  background: url(../../assets/homeImg/topbj.png) no-repeat fixed top;
  margin-bottom: 50px;
}
.top_content {
  width: 100%;
  margin: 0 auto;
}
.situation {
  margin-bottom: 68px;
}
.situation :nth-child(3) {
  margin-right: 0;
}
.lankuang {
  width: 382px;
  height: 220px;
  background: rgba(39, 141, 230, 0.65);
  border: 1px solid #9ac9f2;
  margin-right: 27px;
}
.lankuang .text {
  width: 132px;
  height: 23px;
  font-size: 22px;

  line-height: 31px;
  margin-top: 32px;
  margin-left: 34px;
}
content {
  font-family: Microsoft YaHei;
  font-weight: 400;

  font-size: 16px;
}
.content_top {
  line-height: 91px;
}
.content_bottom {
  line-height: 31px;
}
.content_top :nth-child(1) {
  width: 37px;
  height: 28px;
  font-size: 34px;
  margin-right: 65px;
}
.title {
  width: 100%;
  /* height: 720px;
  line-height: 100px; */

  margin-bottom: 80px;
}
.titleFixed {
  position: fixed;
  top: 0;
}
.anquan {
  width: 200px;
  height: 44px;
  background: rgba(0, 0, 0, 0.2);
  margin: 23px 0;
  line-height: 44px;
}
.anquan span {
  display: inline-block;
  margin-left: 23px;
  margin-right: 12px;
}
.carousel {
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
}
.moreList {
  position: absolute;
  z-index: 11;
  right: 0;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  height: 40px;
  cursor: pointer;
}
.carDiv {
  width: 100%;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  height: 40px;
  line-height: 40px;
  float: left;
  text-align: left;
  /* display: flex;
  justify-content: space-between; */
}
.carDiv span {
  display: inline-block;
}
.carDiv :nth-child(1) {
  margin-left: 14px;
  vertical-align: middle;
}
.carDiv :nth-child(2) {
  font-size: 14px;
  margin-left: 14px;
}
.carDiv :nth-child(3) {
  margin-left: 87px;
}
.carDiv :nth-child(4) {
  float: right;
}
.carDiv :nth-child(4):hover {
  /* color: rgb(81, 170, 248); */
  cursor: pointer;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 40px;
  line-height: 40px;
  /* background: #364d79; */
  overflow: hidden;
}
.center {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: 22px;
}
.imgSpan {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url('../../assets/homeImg/tongzhi.png') no-repeat center;
  line-height: 40px;
  transform: translateY(-3px);
}
.center div {
  width: 277px;
  height: 110px;
  background: linear-gradient(0deg, #b2cdfb, #5e90ed);
  display: flex;
  justify-content: center;
  align-items: center;
}
.center .center_2 div {
  background: linear-gradient(180deg, #2f80ed, #56ccf2);
}
.center .center_3 div {
  background: linear-gradient(180deg, #3aa6c7, #a2f3cf);
}
.center .center_4 div {
  background: linear-gradient(180deg, #745fd0, #a8c0ff);
}
.center div:hover {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.map {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 70px;
}
.map_title {
  font-size: 32px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  margin-bottom: 29px;
}
.carDiv:hover {
  /* color: #ff8a00; */
  cursor: pointer;
}
::v-deep .ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
  left: 0;
  right: auto;
  /* border-left: 3px solid #1890ff; */
}
::v-deep .ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: none;
}
.centerProject {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 90px;
}
.projectRight {
  font-family: 'Microsoft YaHei';
  color: #333333;
  padding-left: 63px;
  border-left: 1px solid #f0f0f0;
}
.projectRight-title {
  font-size: 28px;
  margin-bottom: 55px;
  font-weight: bold;
}
.projectRight-content div {
  width: 33%;
  font-size: 14px;
  margin-bottom: 23px;
}
.projectRight-content {
  margin-bottom: 66px;
}
.enterDataAnalysis {
  width: 150px;
  /* padding: 0 10px; */
  height: 38px;
  background: #4293f4;
  color: #fff;
  line-height: 38px;
  text-align: center;
  margin-bottom: 85px;
  cursor: pointer;
}
.enterDataAnalysis:hover {
  background: #2275d8;
}
.projectRight-bottom-title {
  font-size: 14px;
}
.projectRight-bottom-cell {
  width: 48%;
  margin-right: 6%;
  border-right: 1px solid #f0f0f0;
}
::v-deep .ant-menu-inline .ant-menu-item,
.ant-menu-inline .ant-menu-submenu-title {
  width: 100%;
}
.dataAnalysis {
  width: 100%;
  color: #333333;
  /* text-align: center; */
}
.analysisTitle {
  width: 428px;
  height: 47px;
  font-size: 25px;
  color: #333;
  margin: 0 auto;
  text-align: center;
  line-height: 47px;
  margin-bottom: 52px;
  background: url('../../assets/img/sjzx.png');
}
.selectDiv {
  height: 61px;
  /* width: 100%; */
  /* text-align: center; */
}
.selectCell {
  width: 160px;
  height: 61px;
  font-size: 20px;
  text-align: center;
  line-height: 56px;
  margin-right: 98px;
  cursor: pointer;
}
.selectCell:hover {
  cursor: pointer;
  color: #1890ff;
}
.activeCell {
  color: #3e97df;
  background: url('../../assets/img/selectbg.png');
}
.mapEcharts {
  height: 797px;
  background: #f3f6fb;
  /* margin:0 auto; */
}
.echartsTitle {
  font-size: 24px;
  margin-top: 60px;
  font-weight: bold;
  color: #333333;
}
.ranking {
  background: #fff;
  padding: 28px 28px;
  font-size: 18px;
  color: #333;
}
</style>
